import React from 'react';

import {
  View,
  Text,
  TextInput,
  Image,
  Platform,
  TouchableOpacity,
} from 'react-native';

import {Button} from 'react-native-elements';
import dismissKeyboard from 'dismissKeyboard';

import Config from '../../config';
import BasePage from '../common/BasePage';
import Constants from '../../common/Constants';
import SizeUtils from '../../common/SizeUtils';
import CommonStyles from '../../common/CommonStyles';
import ResponseConstants from '../../common/ResponseConstants';

import LoginSendAction from '../../actions/login/LoginSendAction';
import RequestSmsAction from '../../actions/login/RequestSmsAction';

export default class LoginPhonePage extends BasePage {
  constructor(props) {
    super(props);

    this.state.smsIntervalTick = 0;
    this.state.viewStatus = 1;
    this.state.phoneNum = "";
    this.state.smsNum = "";
    this.state.authorization = "0";
    this.state.smsIntervalTick = -1;
  }

  shouldComponentUpdate(nextProps, nextState) {
    this._checkGetAutorizationInShouldUpdate(nextProps, nextState);
    if (this.state.viewStatus != nextState.viewStatus) {
      if(nextState.viewStatus == ResponseConstants.status_sms_success) {
        this.smsInterval = setInterval(this._updateInterval.bind(this), 1000);
        this._updateInterval();
      }
      else {
        this._clearInterval();
      }
    }
    return true;
  }

  _dealLeavePage() {
    this._clearInterval();
  }

  _updateInterval() {
    var tick = this.state.smsIntervalTick == -1 ? 60 : this.state.smsIntervalTick - 1;
    if(tick == 0) {
      this._clearInterval();
      tick = -1;
    }
    this.setState({
      smsIntervalTick: tick,
    });
  }

  _clearInterval() {
    if(this.smsInterval) {
      clearInterval(this.smsInterval);
      this.smsInterval = null;
    }
  }

  render() {
    return(
      <TouchableOpacity activeOpacity={1} style={{flex:1, paddingTop:Config.paddingTop,
          backgroundColor:"#ffffffff",
          paddingLeft:SizeUtils.translateDesignWidthToCode(54),
          paddingRight:SizeUtils.translateDesignWidthToCode(54),
         flexDirection:"column", alignItems:"center"}} onPress={() => dismissKeyboard()}>
         {this._renderPhoneText()}
         {this._renderSmsText()}
         {this._renderLoginButton()}
         {this._renderNavigationBar()}
      </TouchableOpacity>
    )
  }


  _renderPhoneText() {
    return (
      <View style={{
            height:SizeUtils.translateDesignHeightToCode(64),
            borderBottomWidth:SizeUtils.translateFontSizeToCode(3),
            borderColor:"#eeeeee",
            marginTop:SizeUtils.translateDesignHeightToCode(72),
          }}>
        <TextInput
          style={{
            width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2),
            height:SizeUtils.translateDesignHeightToCode(54),
            borderWidth: 0,
            textAlignVertical: "top",
            padding:0,
            fontSize:SizeUtils.translateFontSizeToCode(32),}}
          onChangeText = {(phoneNum) => this.setState({phoneNum})}
          placeholder = "手机号"
          multiline = {false}
          underlineColorAndroid="transparent"
          maxLength={11}
          underlineColorAndroid="transparent"
          keyboardType="numeric"
          keyboardAppearance="dark"
          value = {this.state.phoneNum}
        />
      </View>
    )
  }

  _renderSmsText() {
    return (
      <View style={{flexDirection:"row",
            height:SizeUtils.translateDesignHeightToCode(64),
            borderBottomWidth:SizeUtils.translateFontSizeToCode(3),
            borderColor:"#eeeeee",
            marginTop:SizeUtils.translateDesignHeightToCode(40),
          }}>
        <TextInput
          style={{

            width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2 + 250),
            height:SizeUtils.translateDesignHeightToCode(54),
            borderWidth: 0,
            padding:0,
            textAlignVertical: "top",
            fontSize:SizeUtils.translateFontSizeToCode(32),}}
          onChangeText = {(smsNum) => this.setState({smsNum})}
          placeholder = "验证码"
          multiline = {false}
          underlineColorAndroid="transparent"
          maxLength={6}
          keyboardType="numeric"
          keyboardAppearance="dark"
          value = {this.state.smsNum}
        />
        <TouchableOpacity onPress = {() => this._onRequestSms()} style={{width:SizeUtils.translateDesignWidthToCode(250),
            height:SizeUtils.translateDesignHeightToCode(50)}}
          disabled = {this.state.smsIntervalTick > 0}>
          <Text style={[CommonStyles.primaryText, {padding:0,fontSize:SizeUtils.translateFontSizeToCode(32),
              paddingTop:SizeUtils.translateDesignHeightToCode(10),
              color:"#000000"}]}>
            {this._getSmsBtnText()}
          </Text>
        </TouchableOpacity>
      </View>
    )
  }

  _getSmsBtnText()  {
    var text = "获取验证码";
    if(this.state.smsIntervalTick > 0) {
      text = text + "(" + this.state.smsIntervalTick + ")";
    }
    return text;
  }

  _onRequestSms() {
    if(this.state.phoneNum == "" || this.state.phoneNum.length != 11) {
      this.setState({
        viewStatus: -901,
      })
    }
    else {
      new RequestSmsAction().call(this, {phoneNum: this.state.phoneNum, type:1})
    }
  }

  _renderLoginButton() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2),
          flexDirection:"column", alignItems:"center",
          marginTop:SizeUtils.translateDesignHeightToCode(180)}}>
        <Button
          backgroundColor="#db3132"
          disabled = {this.state.phoneNum == "" || this.state.smsNum == ""}
          buttonStyle = {{width: SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2),
            height:SizeUtils.translateDesignHeightToCode(80), borderRadius:30}}
          textStyle={{fontSize: SizeUtils.translateFontSizeToCode(30)}}
          title = "登录"
          onPress = {() => this._onPressLoginBtn()}
        />
        <Text style={{color:"#999999", fontSize: SizeUtils.translateFontSizeToCode(24),
          paddingTop: SizeUtils.translateDesignHeightToCode(20)}}>{this._renderSystemNotice()}</Text>
      </View>
    )
  }

  _renderSystemNotice() {
    let statusText = "";
    let showCode = true;
    if(this.state.viewStatus == 1) {
      return "";
    }
    else if(this.state.viewStatus == 2) {
      statusText = "获取验证码中";
      showCode = false;
    }
    else if(this.state.viewStatus == ResponseConstants.status_sms_success) {
      statusText = "验证码已获取";
      showCode = false;
    }
    else if(this.state.viewStatus == 4) {
      statusText = "登录中";
      showCode = false;
    }
    else if(this.state.viewStatus == ResponseConstants.status_phone_length_error) {
      statusText = ResponseConstants.status_phone_length_error_text;
      showCode = false;
    }
    else if(this.state.viewStatus == ResponseConstants.status_sms_length_error) {
      statusText = ResponseConstants.status_sms_length_error_text;
      showCode = false;
    }
    else if(this.state.viewStatus == ResponseConstants.status_bad_request){
      statusText = ResponseConstants.status_phone_num_error;
      showCode = false;
    }
    else {
      statusText = this.state.statusText;
    }
    if(showCode) {
      statusText = statusText + " code:" + this.state.viewStatus;
    }
    return statusText;
  }

  _onPressLoginBtn() {
    dismissKeyboard();
    if(this.state.phoneNum == "" || this.state.phoneNum.length != 11) {
      this.setState({
        viewStatus: ResponseConstants.status_phone_length_error,
      })
      return;
    }
    else if(this.state.smsNum == "" || this.state.smsNum.length != 6) {
      this.setState({
        viewStatus: ResponseConstants.status_sms_length_error,
      })
      return;
    }
    new LoginSendAction().call(this, {phoneNum: this.state.phoneNum, smsNum: this.state.smsNum,
        type: Constants.LOGIN_TYPE.USER})
  }
}
